<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>外层是父组件;内层是子组件;父组件包着子组件</p>
    <p>1.template有且只有一个根元素;2.data是一个函数;3.组件名不要和标签名冲突,如果是多个单词组成的,js中用驼峰形式,html换成中划线</p>
    <p>组件:为了封装和复用,将html/css/js封装在一起,通过组件名代指很多文件</p>
    <p>使用组件的步骤:1.注册组件(全局注册和局部注册)2.引入组件3.当作普通标签使用</p>
    <hr>
    <!-- 以下是局部注册的组件 -->
    <my-div></my-div>
    <!-- 以下是全局注册的组件 -->
    <hi></hi>
    <hr>
  </div>
  <script src="../vue.js"></script>
  <script>
    // 全局注册,放在实例的外面/前面
    Vue.component('hi', {
      template: `<div>
          <p>我是全局注册的组件</p>
        </div>`,
      created() {
        console.log('hello, 我是全局注册的组件');
      },
    })
    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello'
      },
      // 局部注册
      components: {
        // 组件就是一个vue的实例
        'myDiv': { // hello是组件名
          // 模板,包含有且只有一个根元素
          template: 
          ` 
          <div>
            <h1>这是我的第一个组件</h1>
            <p>这是一段文字...{{msg}}</p>
            <button @click="add">{{num}}</button>
          </div>
          `,
          // 初始化组件中的数据,data是一个有返回值的函数
          data() {
            return {
              msg: 'Hi~',
              num: 1
            }
          },
          methods: {
            add() {
              this.num ++
            }
          },
        } 
      }
    })
  </script>
</body>
</html>